<template>
    <div>
      <el-tabs v-model="activeName" >
          <el-tab-pane label="总订单支出的占比" name="first">
              <div ref="chart" style="width: 500px; height: 300px;"></div>
          </el-tab-pane>
          <el-tab-pane label="总订单支出的占比" name="second">
              <div ref="charts" style="width: 500px; height: 300px;"></div>
          </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  import axios from "axios";
  export default {
    data() {
      return {
          activeName: 'first',
      };
    },
    mounted() {
      this.renderChart();
      this.renderChart2();
    },
    methods: {
      renderChart() {
          const chartData = {
    legendData: [],
    seriesData: []
  };
        const chart = echarts.init(this.$refs.chart);
  
  axios.get('/api/output')
                      .then(function (response) {
                          const data=response.data.data;
                          data.forEach(item => {
    chartData.legendData.push(item.name); // 将id映射到legendData的name
    chartData.seriesData.push({ name: item.name, value: item.total }); // 映射totalViews到value
  });
        const { legendData, seriesData } = chartData;
        const option = {
          title: {
            text: '总的支出概览',
            subtext: '显示为物料名',
            x: 'center',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: legendData,
          },
          series: [
            {
              name: 'Category',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: seriesData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        }
  
        chart.setOption(option);})
                      
      },
      renderChart2() {
          const chartData = {
    legendData: [],
    seriesData: []
  };
        const chart = echarts.init(this.$refs.charts);
  
  axios.get('/api/output/get')
                      .then(function (response) {
                          const data=response.data.data;
                          data.forEach(item => {
    chartData.legendData.push(item.name); // 将id映射到legendData的name
    chartData.seriesData.push({ name: item.name, value: item.total }); // 映射totalViews到value
  });
        const { legendData, seriesData } = chartData;
        const option = {
          title: {
            text: '今日的支出概览',
            subtext: '显示为物料名',
            x: 'center',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: legendData,
          },
          series: [
            {
              name: 'Category',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: seriesData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        }
  
        chart.setOption(option);})
                      
      },
    },
  };
  </script>
  